<style lang="less">
  .page{
    .page-content{
      background: #fff;
      .car-infor {
        text-align:center;
        background-color:#EC681F;
        color:#fff;
        p {
          line-height:46px;
          margin:0;
          font-size:28px;
          &.car-name {
            width:340px;
            margin:0 auto;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .modify {
            font-size:30px;
          }
          input {
            max-width:100px;
            border:none;
            background-color:#EC681F;
            color:#fff;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-content">
      <div class="car-infor">
        <p class="car-name">{{carName}}</p>
        <p class="car-mileage">里程：{{mileage}} KM
          <!-- <input v-model="" :disabled="!isModify" :autofocus="isModify" :class="isModify?inputBorder:''"></input>
          <i class="iconfont modify" @click="modifyMile">&#xe6e5;</i> -->
        </p>
      </div>
      <TableView  :mileage='mileage'></TableView>
    </div>
  </div>
</template>
<script>
  import TableView from './components/TableView.vue'
  export default {
    components: {
      TableView
    },
    data () {
      return {
        activeItem:"BYXM",
        carName:"",
        mileage:"",
      }
    },
    mounted () {
      this.getInfor();
    },
    methods: {
      getInfor(){
        this.post(Api.userApp.getUserCar,res=>{
          if(res.data.object instanceof Array){
            if(res.data.object.length != 0){
              let object = res.data.object[0];
              this.carName = object.carTypeName;
              this.mileage = Number(object.driveDistance);
            };
          };
        })
      },
    }
  }
</script>